<template>
    <div class="event">
      <!-- <CommonForm :form="selectedComponent.events" :formJson="formJson" /> -->
      <a-form ref="ruleForm" class="form" :colon="false" v-model="form" :label-col="{ span: 4 }"
        :wrapperCol="{ span: 20 }">
        <a-form-item
          label="关联字段"
          prop="source"
          class="row"
          >
          <a-select v-model="form.source" allowClear @change="handleSourceChange">
            <a-select-option v-for="option in sourceOptions" :key="option.value">
              {{option.label}}
            </a-select-option>
          </a-select>

        </a-form-item>
      </a-form>
      <a-table
        :row-selection="{ selectedRowKeys, onChange: handleSelectChange }"
        :columns="columns"
        :data-source="data"
        :pagination="false"
      >
        <div slot="component" slot-scope="value">{{value}}</div>
        <a-select :disabled="!form.source" slot="field" slot-scope="value, row, index" :value="value" class="select"
@change="(newValue)=> handleFieldChange(newValue,row, index)">
          <a-select-option v-for="item in filterOptions(row.options)" :key="item.value">{{item.label}}</a-select-option>
        </a-select>
      </a-table>

    </div>
</template>

<script >
import { mapState } from "vuex"
import CommonForm from "../../../../common/CommonForm"
import { getAllAnalysisComponentByEditType, getAllAnalysisComponentTypes, getFieldListByComponent, getFieldListByComponentList } from "../../../lib/analysisData"
import getAttrList from "./attr"


// 联动设置
export default {
  data() {
    return {
      customFormJson: [],
      // selectedRowKeys: [],
      columns: [
        {
          title: "目标组件",
          dataIndex: "name",
          scopedSlots: { customRender: "name" },
        },
        {
          title: "目标字段",
          dataIndex: "field",
          scopedSlots: { customRender: "field" },
        },
      ]
    }
  },
  computed: {
    ...mapState("lowCode", {
      selectedComponent: state => state.selectedComponent,
      selectFilterFieldList: state => state.selectFilterFieldList
    }),
    formJson(){
      return getAttrList(this.selectedComponent.tag, this.$store.state.lowCode)
    },
    sourceOptions(){
      return getFieldListByComponent(this.selectedComponent)
    },
    form(){
      return this.selectedComponent.linkage
    },
    data(){
      return this.selectedComponent.linkage.componentList
    },
    selectedRowKeys(){
      console.log((this.data || []))
      // return []
      return this.selectedComponent.linkage.componentList.filter(item => item.isCheck).map(item => item.key)
    }
  },
  methods: {
    handleSelectChange(selectedRowKeys) {
      this.selectedComponent.linkage.componentList.forEach(item => {
        item.isCheck = selectedRowKeys.includes(item.key)
      })
    },
    handleFieldChange(value, row, index){
      this.data[index].field = value
      this.$forceUpdate()
      // this.$store.commit("lowCode/setSelectedComponent", this.selectedComponent)
      console.log(value, row, index)
      // this.$set(this.data,index, {
      //   ...row,
      //   field: value
      // })
    },
    filterOptions(options){
      if(this.form.source){
        const {colType} = this.sourceOptions.find(item => item.value === this.form.source)
        return options.filter(item => item.colType === colType)
      }
      else {
        return options
      }

    },
    handleSourceChange(){
      this.selectedComponent.linkage.componentList.forEach(item => {
        item.field = undefined
      })
    }

  },
  components: {
    CommonForm
  },

}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
